<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">记录时间</span>
            <el-date-picker
              v-model="queryInfo.Startdate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              format="yyyy/MM/dd"
            />
            至
            <el-date-picker
              v-model="queryInfo.Enddate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd"
              format="yyyy/MM/dd"
            />
          </div>

          <div class="fl">
            <span class="c_tip">病人科室</span>
            <el-input v-model="queryInfo.DeptName" readonly="readonly" clearable class="c_long" type="text" placeholder="科室" />
            <i class="c_searchbtn" @click="selectPop('科室')">选择</i>
          </div>

          <div class="fl">
            <span class="c_tip">药学类型</span>
            <el-select v-model="queryInfo.Type" placeholder="请选择">
              <el-option
                v-for="item in TypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="sbtn_box">
            <el-button type="primary" style="margin-left: 20px" class="btn_clear" @click="btnGetPharmaRecordsListJson">查询</el-button>
            <el-button type="danger" class="btn_clear" @click="clearFun">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="wrapper">
      <Bluetable
        ref="blueTable"
        :t-head="tHeader"
        :t-data="PharmaRecordsList"
        @operateClick="operateClick"
      />
      <pagination
        :total="queryPage.total"
        :page.sync="queryPage.pagenum"
        :limit.sync="queryPage.pagesize"
        @pagination="paginationChange"
      />
    </div>
    <el-dialog
      width="70%"
      title="用药建议"
      :visible.sync="medicationSuggestion"
      @close="medicationSuggestion = false"
    >
      <el-form :model="medicationSuggestionDataObj">
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="medicationSuggestionDataObj.createdate"
            style="width:90%"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.createuser" style="width:90%" />
        </el-form-item>
        <el-form-item label="药师回复信息" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.pharmacistreply" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="接受医生" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.suggestiondoctor" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="发送状态" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.sendingstate" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="建议类型" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.suggestiontype" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="建议对象" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.suggestionobject" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="建议内容" :label-width="formLabelWidth">
          <el-input v-model="medicationSuggestionDataObj.suggestionpoints" style="width:90%" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="medicationSuggestion = false">关闭</el-button>
      </span>
    </el-dialog>
    <!--      监护计划-->
    <el-dialog
      width="70%"
      title="监护计划"
      :visible.sync="guardianshipPlan"
      @close="guardianshipPlan = false"
    >
      <el-form :model="guardianshipPlanObj">
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="guardianshipPlanObj.startdate"
            style="width:90%"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="guardianshipPlanObj.createuser" style="width:90%" />
        </el-form-item>

        <el-form-item label="监护对象" :label-width="formLabelWidth">
          <el-input v-model="guardianshipPlanObj.guardianshipobject" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="监护要点" :label-width="formLabelWidth">
          <el-input v-model="guardianshipPlanObj.suggestionpoints" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="监护计划状态" :label-width="formLabelWidth">
          <el-input v-model="guardianshipPlanObj.status" style="width:90%" type="textarea" />
        </el-form-item>

        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="guardianshipPlanObj.createdate"
            style="width:90%"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="guardianshipPlan = false">关闭</el-button>
      </span>
    </el-dialog>
    <!--医嘱审核-->
    <el-dialog
      width="70%"
      title="医嘱审核"
      :visible.sync="orderslist"
      @close="orderslist = false"
    >
      <el-form :model="orderslistObj">

        <el-form-item label="病人号" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.patient_id" style="width:90%" />
        </el-form-item>
        <el-form-item label="处方号" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.presc_no" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="合理或者不合理" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.comments_result" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="点评点" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.ruleid" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="点评问题" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.commentsname" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="问题药品" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.drugname" style="width:90%" type="textarea" />
        </el-form-item>
        <el-form-item label="问题详细描述" :label-width="formLabelWidth">
          <el-input v-model="orderslistObj.manageview" style="width:90%" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderslist = false">关闭</el-button>
      </span>
    </el-dialog>

    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleDeptcode="handleDeptcode"
    />
  </div>
</template>
<script>
import { GetPharmaRecordsListJson, GetPharmaRecordsDetailJson } from '@/api/cpw'
import Poptable from '../components/poptable'
export default {
  components: { Poptable },
  data() {
    return {
      // 查询参数
      queryInfo: {
        Startdate: '',
        Enddate: '',
        Deptcode: '',
        DeptName: '',
        Type: '1',
        Patient_id: '',
        Visit_id: ''
      },
      TypeList: [{
        value: '1',
        label: '用药建议'
      }, {
        value: '2',
        label: '监护计划'
      }, {
        value: '3',
        label: '医嘱审核'
      }, {
        value: '4',
        label: '所有'
      }],
      formLabelWidth: '120px',
      // 查询病人列表分页参数
      queryPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      PharmaRecordsList: [],
      tHeader: [],
      tHeader1: [
        {
          operate: ['查看'],
          label: '操作',
          link: true,
          width: '80px'
        },
        {
          prop: 'inp_no',
          label: '住院号'
        }, {
          prop: 'deptname',
          label: '科室'
        }, {
          prop: 'patient_name',
          label: '病人姓名'
        }, {
          prop: 'type',
          label: '类型'
        }, {
          prop: 'object',
          label: '对象'
        }, {
          prop: 'points',
          label: '内容'
        }, {
          prop: 'state',
          label: '状态'
        }, {
          prop: 'createuser',
          label: '记录人'
        }, {
          prop: 'recordingdate',
          label: '时间'
        }
      ],
      tHeader2: [
        {
          operate: ['查看'],
          label: '操作',
          link: true,
          width: '80px'
        },
        {
          prop: 'inp_no',
          label: '住院号'
        }, {
          prop: 'deptname',
          label: '科室'
        }, {
          prop: 'patient_name',
          label: '病人姓名'
        }, {
          prop: 'type',
          label: '类型'
        }, {
          prop: 'object',
          label: '对象'
        }, {
          prop: 'points',
          label: '内容'
        }, {
          prop: 'state',
          label: '状态'
        }, {
          prop: 'createuser',
          label: '记录人'
        }, {
          prop: 'startdate',
          label: '时间'
        }
      ],
      tHeader3: [
        {
          operate: ['查看'],
          label: '操作',
          link: true,
          width: '80px'
        },
        {
          prop: 'inp_no',
          label: '住院号'
        }, {
          prop: 'deptname',
          label: '科室'
        }, {
          prop: 'patient_name',
          label: '病人姓名'
        }, {
          prop: 'type',
          label: '类型'
        }, {
          prop: 'object',
          label: '对象'
        }, {
          prop: 'points',
          label: '内容'
        }, {
          prop: 'state',
          label: '状态'
        }, {
          prop: 'createuser',
          label: '记录人'
        }, {
          prop: 'commentdate',
          label: '时间'
        }
      ],
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;',
      // 用药建议弹窗
      medicationSuggestion: false,
      medicationSuggestionDataObj: {
        // 创建时间
        createdate: '',
        // 创建人
        createuser: '',
        // 发送状态1已发送 0不发送
        sendingstate: '',
        // 药师回复信息
        pharmacistreply: '',
        // 接受医生
        suggestiondoctor: '',
        // 建议类型
        suggestiontype: '',
        // 建议对象
        suggestionobject: '',
        // 建议内容
        suggestionpoints: ''
      },
      // 监护计划
      guardianshipPlan: false,
      guardianshipPlanObj: {
        // 结束时间
        createdate: '',
        // 创建人
        createuser: '',
        // 监护对象
        guardianshipobject: '',
        // 开始时间
        startdate: '',
        // 监护计划状态 持续关注 结束
        status: '',
        // 监护要点
        suggestionpoints: ''
      },
      // 医嘱审核
      orderslist: false,
      orderslistObj: {
        // 病人号
        patient_id: '',
        // 处方号
        presc_no: '',
        // 合理或者不合理
        comments_result: '',
        // 点评点
        ruleid: '',
        // 点评问题
        commentsname: '',
        // 问题药品
        drugname: '',
        // 问题详细描述
        manageview: ''
      }
    }
  },
  watch: {
    'queryInfo.Type': {
      handler(newName, oldName) {
        if (newName === '1' || newName === '4') {
          this.tHeader = this.tHeader1
        } else if (newName === '2') {
          this.tHeader = this.tHeader2
        } else if (newName === '3') {
          this.tHeader = this.tHeader3
        }
        this.btnGetPharmaRecordsListJson()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    operateClick(val, row) {
      let type = ''
      if (row.type === '用药建议') {
        type = '1'
      } else if (row.type === '监护计划') {
        type = '2'
      } else if (row.type === '医嘱审核') {
        type = '3'
      }
      this.GetPharmaRecordsDetailJson(type, row.id)
    },
    async GetPharmaRecordsDetailJson(Type, Id) {
      const json = {
        Type: Type,
        Id: Id
      }
      await GetPharmaRecordsDetailJson({
        json: json
      }).then(res => {
        if (Type === '1') {
          // 用药建议
          this.medicationSuggestion = true
          this.medicationSuggestionDataObj = {
            // 创建时间
            createdate: res.PharmaRecordsDetailData[0].createdate,
            // 创建人
            createuser: res.PharmaRecordsDetailData[0].createuser,
            // 发送状态1已发送 0不发送
            sendingstate: res.PharmaRecordsDetailData[0].sendingstate === '0' ? '不发送' : '已发送',
            // 药师回复信息
            pharmacistreply: res.PharmaRecordsDetailData[0].pharmacistreply,
            // 接受医生
            suggestiondoctor: res.PharmaRecordsDetailData[0].suggestiondoctor,
            // 建议类型
            suggestiontype: res.PharmaRecordsDetailData[0].suggestiontype,
            // 建议对象
            suggestionobject: res.PharmaRecordsDetailData[0].suggestionobject,
            // // 建议内容
            suggestionpoints: res.PharmaRecordsDetailData[0].suggestionpoints
          }
        } else if (Type === '2') {
          // 监护计划
          // 监护计划
          this.guardianshipPlan = true
          this.guardianshipPlanObj = {
            // 结束时间
            createdate: res.PharmaRecordsDetailData[0].createdate,
            // 创建人
            createuser: res.PharmaRecordsDetailData[0].createuser,
            // 监护对象
            guardianshipobject: res.PharmaRecordsDetailData[0].guardianshipobject,
            // 开始时间
            startdate: res.PharmaRecordsDetailData[0].startdate,
            // 监护计划状态 持续关注 结束
            status: res.PharmaRecordsDetailData[0].status === 1 ? '结束' : '持续关注',
            // 监护要点
            suggestionpoints: res.PharmaRecordsDetailData[0].suggestionpoints
          }
        } else if (Type === '3') {
          this.orderslist = true
          this.orderslistObj = {
            // 病人号
            patient_id: res.PharmaRecordsDetailData[0].patient_id,
            // 处方号
            presc_no: res.PharmaRecordsDetailData[0].presc_no,
            // 合理或者不合理
            comments_result: res.PharmaRecordsDetailData[0].comments_result,
            // 点评点
            ruleid: res.PharmaRecordsDetailData[0].ruleid,
            // 点评问题
            commentsname: res.PharmaRecordsDetailData[0].commentsname,
            // 问题药品
            drugname: res.PharmaRecordsDetailData[0].drugname,
            // 问题详细描述
            manageview: res.PharmaRecordsDetailData[0].manageview
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 分页
    async paginationChange(type) {
      this.queryPage.pagenum = type.page
      this.queryPage.pagesize = type.limit
      await this.GetPharmaRecordsListJson()
    },
    // 查询
    btnGetPharmaRecordsListJson() {
      this.queryPage = {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      }
      if (this.queryInfo.Type === '') {
        this.$message({
          message: '请选择药学类型',
          type: 'error'
        })
      } else {
        this.GetPharmaRecordsListJson()
      }
    },
    async GetPharmaRecordsListJson() {
      const tempJson = {
        Startdate: this.queryInfo.Startdate,
        Enddate: this.queryInfo.Startdate,
        Deptcode: this.queryInfo.Deptcode,
        Type: this.queryInfo.Type
      }
      for (var key in tempJson) {
        if (tempJson[key] === '') {
          delete tempJson[key]
        }
      }
      await GetPharmaRecordsListJson({
        json: tempJson,
        pagesize: this.queryPage.pagesize,
        pagenum: this.queryPage.pagenum
      }).then(res => {
        this.PharmaRecordsList = res.PharmaRecordsList
        this.queryPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },

    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    handleDeptcode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].deptname)
        codes.push(data[i].deptcode)
      }
      this.queryInfo.DeptName = names.join(',')
      this.queryInfo.Deptcode = codes.join(',')
    },

    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    },
    clearFun() {
      this.$refs.ptable.clearSelect()
      this.queryInfo = {
        Startdate: '',
        Enddate: '',
        Deptcode: '',
        DeptName: '',
        Type: '',
        Patient_id: '',
        Visit_id: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    background:#e6edf5;
  }
  .wrapper{
    margin: 0 20px;
  }
  .patientInfo{
    .infoline{
      display: flex;
      justify-content: space-around;
      .fl{
        display: flex;
        padding-bottom: 5px;
        width: 210px;
        .c_tip{
          width: 60px;
          text-align: right;
        }
        .c_text{
          width: 140px;
          padding-left: 4px;
        }
      }
    }
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_long{
          width:120px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }

    .infogroups{
      width: 100%;
      height: 100%;
    }
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .table_box{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding:0 18px;
      .infoCard{
        width: 220px;
        padding-bottom: 20px;
      }
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-card__body{
    padding: 0;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  .el-card{
    border: 0;
  }
  .no-data{
    font-size: 25px;
    margin-left: 115px;
  }
  .infoCard{
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    padding: 10px 10px;
  }
  .card-title{
    color:#ffffff;
    background-color: #28A4F4;
    height: 75px;
    text-align: center;
    .header-bedid{
      font-size: 20px;
      padding: 10px;
    }
    .header-bedid:hover {
      span {
        border-bottom: 1px solid #fff;
      }
    }
    .header-content:hover{
      span{
        border-bottom: 1px solid #fff;
      }
    }
  }
  .card-body {
    font-size: 12px;
    padding: 10px;
    height: 180px;
    .info-item{
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 5px;
      .info-label{
        flex: 1;
        text-align: right;
      }
      .info-message{
        flex: 1;
        margin-left: 5px;
        .info-status{
          color: #ffffff;
          span{
            padding: 1px 3px;
            border-radius: 3px;
            background-color: #5cb85c;
          }
        }
      }
      .info-more{
        display: flex;
        .info-sex{
          padding-left: 5px;
        }
      }
    }
  }
  /deep/.el-radio__label{
    font-size: 12px;
  }
  .seek_form{
    font-size:14px;
    line-height:40px;
    border:1px solid #b3d8ff;
    .seek_factor{
      width:20%;
      height:40px;
      display:flex;align-items: center;justify-content: center;
      .seek_text{
        display:inline-block;
        width:45%;
        height:100%;
        background:#ecf5ff;
        color:#409eff;
        text-align:right;
        padding-right:10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .seek_val{
        display:inline-block;
        width:55%;
        height:100%;
        color:#333;
        padding-left:10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>
